<template>
  <div id="container">
    <div id="fireworks"><img src="../../assets/img/fireworks.png" alt=""></div>
    <div id="firecracker"><img src="../../assets/img/firecracker.png" alt="" width="8px"></div>
    
</div>
</template>
<script>
 export default {
  data() {
   return {
    orderNum: [], // 默认订单总数
    num: 2019
   }
  },
  created() {},
  mounted() {
  // 定时增长数字
  this.timer = setInterval(() => {
  this.num +=3
  this.toOrderNum(this.num)
  }, 3000) 
  },
  methods: {
    // 设置文字滚动
   setNumberTransform () {
    const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
    const numberArr = this.orderNum.filter(item => !isNaN(item))
    // 结合CSS 对数字字符进行滚动,显示订单数量
    for (let index = 0; index < numberItems.length; index++) {
    const elem = numberItems[index]
    elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
    }
   },
   // 处理总订单数字
   toOrderNum(num) {
    num = num.toString()
    this.orderNum = num.split('') // 将其便变成数据，渲染至滚动数组
    this.setNumberTransform()
   },
  }
 }
</script>
<style  lang='scss' rel="stylesheet/style">
    * {
        margin: 0;
        padding: 0;
    }
    html{
        width: 100%;
        height: 100%;
    }
    body{
        width: 100%;
        height: 100%;
    }
    #container{
        width: 100%;
        height: 100%;
        background-color: black;
        position: relative;
    }
    #fireworks{
        position: absolute;
        left: 50%;
        margin-left: -250px;
        bottom: 60%;
        margin-bottom: -180px;
        transform: scale(0);
        animation: fireworks 5s 3s;
    }

    @keyframes fireworks {
        0%{
            transform: scale(0);
        }
        80%{
            transform: scale(1);
        }
        100%{
            opacity: 0;
        }
    }
    #firecracker{
        position: absolute;
        left: 50%;
        bottom: 0%;
        margin-left: -4px;
        animation: firecracker 3s forwards;
    }

    @keyframes firecracker {
        0%{
            transform: scale(1);
            bottom: 0%;
        }
        100%{
            bottom: 60%;
            transform: scale(0);
        }
    }
</style>